<template>
  <el-breadcrumb class="breadcrumb-component">
    <el-breadcrumb-item v-for="item in breadcrumbData" :key="item.path" :to="{ path: item?.path }">
      {{ item.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
  import { ref, watch, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  const route = useRoute();
  const breadcrumbData = ref([]);
  const getBreadcrumbData = () => {
    const temp = [{ title: '首页', path: '' }];
    const r = route.matched
      .filter(v => v.meta.title)
      .map(v => {
        return { path: v.path, title: v.meta.title };
      });
    breadcrumbData.value = [...temp, ...r];
  };

  watch(
    route,
    () => {
      getBreadcrumbData();
    },
    {
      immediate: true,
    },
  );

  onMounted(() => {
    getBreadcrumbData();
  });
</script>

<style scoped lang="scss">
  .breadcrumb-component {
    height: 4%;
  }

  :deep(.el-breadcrumb__item .el-breadcrumb__inner) {
    color: #000;
  }
</style>
